<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/jquery-1.12.4.js"></script>
	</head>
	<body>
		<div class="banner">
			<a href="#" class="ig"><img src="img/b1.jpg" ></a>
			<a href="#" class="ig"><img src="img/b2.jpg" ></a>
			<a href="#" class="ig"><img src="img/b3.jpg" ></a>
			<div class="dot">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="prevNext prev"></div>
			<div class="prevNext next"></div>
		</div>

		<script type="text/javascript">
			var i = 0;
			var timer;
			// 1.显示(show)第一张(eq)图片，隐藏(hide)其他图片
			$(".ig").eq(0).show().siblings(".ig").hide();
			// 2.每隔2s自动轮播下一张图片
			timer = setInterval(function(){
				// 2s  i=0+1  eq(1)显示第二张
				// 4s  i=1+1  eq(2)显示第三张
				// 6s  i=2+1=3 如果为3要变成0，显示第一张
				i++;
				if(i==3){
					i=0;
				}
				$(".ig").eq(i).show().siblings(".ig").hide();
			},2000);
		
			// .hover(function(){},function(){})
			// 第一个函数指：鼠标悬浮触发的事件
			// 第二个函数指：鼠标移开触发的事件
			$('.ig').hover(function(){
				clearInterval(timer);
			},function(){
				timer = setInterval(function(){
					i++;
					if(i==3){
						i=0;
					}
					$(".ig").eq(i).show().siblings(".ig").hide();
				},2000);
			})
			// 鼠标悬浮在圆点指示器上
			$('.dot span').hover(function(){
				// 关闭定时器
				clearInterval(timer);
				// 有多个相同的对象，可通过$(this)来获取正在处理的对象
				var iii = $(this).index();
				$(".ig").eq(iii).show().siblings(".ig").hide();
			},function(){
				// 图片继续轮播（重新设置定时器）
			})
			// 鼠标点击上一页/下一页
			$(".prev").click(function(){
				i--;
				if(i<0){i=2}
				$('.ig').eq(i).show().siblings('.ig').hide();
			})
			$('.next').click(function(){
				i++;
				if(i==3){
					i = 0;
				}
				$('.ig').eq(i).show().siblings('.ig').hide();
			})
			
		</script>
	</body>
</html>
